<!-- 模板 -->
<template>
  <div class="root">
    <Search></Search>
    <div class="banner">
      <!-- 用了瀑布流组件 -->
      <waterfall :col="col" :data="dataList">
        <template>
          <div class="item" v-for="(item, index) in dataList" :key="index">
            <div class="img"><img :src="item.src" alt="" /></div>
            <div class="info">
              <div class="text">
                {{ item.title }}
              </div>
              <div class="user">
                <div class="toux">
                  <img v-if="item.usersrc" :src="item.usersrc" alt="" />
                </div>
                <div class="name">
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </waterfall>
    </div>
    <Footers :index1="index1"></Footers>
  </div>
</template>
<script>
// import img from '../assets/logo.png'
import request from '../utils/request.js'
import Search from './Search.vue'
import Footers from './Footers.vue'
export default {
  data() {
    return {
      id: 0,
      img: '',
      dataList: [],
      col: 2,
      page: 1,
      index1: 2,
    }
  },

  props: [],
  components: { Search, Footers },
  computed: {
    itemWidth() {
      return 138 * 0.5 * (document.documentElement.clientWidth / 375) // #rem布局 计算宽度
    },
    gutterWidth() {
      return 9 * 0.5 * (document.documentElement.clientWidth / 375) //#rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
    },
  },

  filters: {},
  methods: {
    async ajax() {
      let opt = {
        url: 'banner',
        type: 'get',
        data: {
          id: this.id,
        },
      }
      try {
        let { data: res } = await request(opt)

        if (res.meta.status !== 200) {
          return
        }
        this.dataList = res.data
      } catch (error) {
        console.log(error)
      }
    },
  },
  created() {
    this.ajax()
  },
  mounted() {},
}
</script>
<style lang="less" scoped>
.banner {
  font-size: 0.28rem;
  margin-bottom: 1rem;
  padding: 0 0.1rem;
  .item {
    padding: 0.1rem;
    padding-bottom: 0;
    width: 100%;
    .img {
      width: 100%;
      img {
        border-radius: 0.1rem 0.1rem 0 0;
        width: 100%;
      }
    }
    .info {
      .text {
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .user {
        margin-top: 0.1rem;
        display: flex;
        align-items: center;
        .toux {
          width: 20%;
          img {
            width: 100%;
          }
        }
        .name {
          color: #666;
          font-size: 0.24rem;
          margin-left: 0.2rem;
        }
      }
    }
  }
}
</style>
